function IdBase(id) {
    this.id = id;
    this.selector = '#' + this.id;
    this.contentSelector = this.selector + ' *';

    this.hideAll = function() {
        $(this.selector + ',' + this.contentSelector).hide();
    }
}

function ClassBase(clazz) {
    this.id = clazz;
    this.selector = '.' + this.id;
    this.contentSelector = this.selector + ' *';

    this.hideAll = function() {
        $(this.selector + ',' + this.contentSelector).hide();
    }
}

function Central(id) {
    this.inheritFrom = IdBase;
    this.inheritFrom(id);
    this.menuItems = new Array();

    this.withLogo = function(logoId) {
        this.logo = new Logo(logoId);
        var central = this;
        this.logo.link.click(function() {
            central.clickMenuItem(undefined);
            central.left.closeSide();
            central.right.closeSide();
            return false;
        });
        return this;
    }

    this.withMenuItems = function(menuItemsClasses) {
        for (menuItemClass in menuItemsClasses) {
            var menuItem = new MenuItem(menuItemsClasses[menuItemClass]);
            this.menuItems.push(menuItem);

            menuItem.link.css({opacity: 0.0});

            // setup van dummy click handler voor menu item: doet niets
            menuItem.link.click(function() {
                return false;
            });
        }
        return this;
    }

    this.overLeft = function(left) {
        this.left = left;
        for (m in this.menuItems) {
            this.menuItems[m].leftSide = left;
        }
        return this;
    }

    this.overRight = function(right) {
        this.right = right;
        for (m in this.menuItems) {
            this.menuItems[m].rightSide = right;
        }
        return this;
    }

    this.slideOpen = function(callback) {
        $(this.selector).css({width: '0px', marginLeft: '154px', marginRight: '154px'})
            .animate({width: '308px', marginLeft: '0px', marginRight: '0px'}, 500, 'easeInQuad', callback);
        return this;
    }

    this.showLogo = function() {
        $(this.logo.selector + ',' + this.logo.contentSelector).fadeIn(400);
        return this;
    }

    this.slideInMenuItems = function() {
        $('#menu').show();
        var central = this;
        // hier ergens setup van click en hover handler
        $('.cat-item:even').animate({opacity: 1.0}, 400)
            .show('slide', {direction: 'left', easing: 'easeOutBack'}, 1200);
        $('.cat-item:odd').animate({opacity: 1.0}, 400)
            .show('slide', {direction: 'right', easing: 'easeOutBack'}, 1200, function() {
                // setup van hover en click handler
                for (m in central.menuItems) {
                    var menuItem = central.menuItems[m];
                    menuItem.link.addClass('hover').bind('mouseover', menuItem, function(event) {
                        event.data.mouseOver();
                    }).bind('mouseout', menuItem, function(event) {
                        event.data.mouseOut();
                    }).bind('click', menuItem, function(event) {
                        if (event.data.id != central.lastMenuItemClicked) {
                            // verander de foto van het menu item
                            central.clickMenuItem(event.data.id);

                            // haalt de inhoud voor de zijkanten op via AJAX
                            $.get(event.data.link.attr('href'), {ajax:true}, function(data) {
                                var html = $('<div/>').html(data);
                                central.left.showContent(html.find('#left').html());
                                central.right.showContent(html.find('#right').html());
                            });
                        }

                        // vermijdt het standaard gedrag van links
                        return false;
                    });
                } 
            });
        $('.cat-item a').show();
        return this;
    }

    this.clickMenuItem = function(menuItemId) {
        for (m in this.menuItems) {
            var menuItem = this.menuItems[m];
            menuItem.click(menuItem.id == menuItemId);
        }
        this.lastMenuItemClicked = menuItemId;
    }
}

function Logo(id) {
    this.inheritFrom = IdBase;
    this.inheritFrom(id);
    this.link = $(this.selector + ' > a');
}

function MenuItem(clazz) {
    this.inheritFrom = ClassBase;
    this.inheritFrom(clazz);
    this.link = $(this.selector + ' > a');

    this.mouseOver = function() {
        if (!this.clicked) {
            $(this.link).stop().css({backgroundPosition: '0px -17px', opacity: 0.0})
            this.slideInText();
        }
    }
    this.slideInText = function() {
        $(this.link).animate({opacity: 0.7, backgroundPosition: '(0px 45px)'}, 300, 'easeOutQuart');
    }

    this.mouseOut = function() {
        if (!this.clicked) {
            $(this.link).stop().animate({opacity: 0.0, backgroundPosition: '(0px 108px)'}, 300, 'easeInQuart');
        }
    }

    this.click = function(isClicked) {
        if (!this.clicked && isClicked) {
            $(this.selector).addClass('current-cat');
            $(this.link).removeClass('hover').css({opacity: 0.7, backgroundPosition: '0px 45px'});
        } else if (this.clicked && !isClicked) {
            $(this.link).addClass('hover');
            $(this.selector).removeClass('current-cat');
            $(this.link).animate({opacity: 0.0, backgroundPosition: '(0px 108px)'}, 300, 'easeInQuart');
        }
        this.clicked = isClicked;
        return this;
    }
}

function LeftSide(id) {
    this.inheritFrom = IdBase;
    this.inheritFrom(id);
    this.isOpen = false;

    this.slideUnderCentral = function() {
        $(this.selector).css({left: '527px'}); // = 2 x 'left' + breedte van schaduw
        return this;
    }

    this.showContent = function(text) {
        if (this.isOpen) {
            var leftSide = this;
            this.closeSide(function() {
                leftSide.openSide(text);
            });
        } else {
            this.openSide(text);
        }
    }

    this.openSide = function(text) {
        var leftSide = this;
        this.setText(text);
        $(this.selector).animate({left: '256px'}, 600, 'easeInOutQuart', function() {
            leftSide.isOpen = true;
        });
    }

    this.closeSide = function(callback) {
        var leftSide = this;
        $(this.selector).stop().animate({left: '527px'}, 600, 'easeInOutQuart', function() {
            leftSide.isOpen = false;
            // pauze tussen toeglijden en eventueel weer openglijden
            $(this).animate({left: '527px'}, 100, function() {
                if (callback != undefined) {
                    callback();
                }
            });
        });
    }

    this.setText = function(text) {
        $(this.selector).html(text).show();
    }
}

function RightSide(id) {
    this.inheritFrom = IdBase;
    this.inheritFrom(id);
    this.isOpen = false;

    this.slideUnderCentral = function() {
        $(this.selector).css({marginLeft: '-286px'}); // = -('width' + schaduw)
        return this;
    }

    this.showContent = function(text) {
        if (this.isOpen) {
            var rightSide = this;
            this.closeSide(function() {
                rightSide.openSide(text);
            });
        } else {
            this.openSide(text);
        }
    }

    this.openSide = function(text) {
        var rightSide = this;
        this.setText(text);
        $(this.selector).animate({marginLeft: '-15px'}, 600, 'easeInOutQuart', function() {
           rightSide.isOpen = true;
        });
    }

    this.closeSide = function(callback) {
        var rightSide = this;
        $(this.selector).stop().animate({marginLeft: '-286px'}, 600, 'easeInOutQuart', function() {
            rightSide.isOpen = false;
            // pauze tussen toeglijden en eventueel weer openglijden
            $(this).animate({marginLeft: '-286px'}, 100, function() {
                if (callback != undefined) {
                    callback();
                }
            });
        });
    }

    this.setText = function(text) {
        $(this.selector).html(text).show();
    }
}